<template>
  <!-- 轮播图 -->
    <div>
        <div class="block">
            <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
            <el-carousel height="40vw" class="block-photo">
                <el-carousel-item v-for="item in menuNav" :key="item.id">
                    <img class="photo" :src="item.img" alt="" />
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
// eslint-disable-next-line import/named
import { getPosters } from '@/api/home';

export default {
  data() {
    return {
      menuNav: [],
    };
  },
  created() {
    this.getPosters();
  },
  methods: {
    async getPosters() {
      const { data } = await getPosters();
      this.menuNav = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.photo {
    width: 375px;
    height: 150px;
}

.el-carousel__item {
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

</style>
